<template>
  <div>
    <div class="line100"></div>
    <van-tabbar
      v-model="activenumber"
      @change="onChange"
    >
      <van-tabbar-item icon="home-o">
        <span>首页</span>
        <!-- <template #icon="props">
          <img :src="props.active ? icon.active : icon.inactive" />
        </template> -->
      </van-tabbar-item>
      <van-tabbar-item icon="bag-o">
        <span>分类</span>
      </van-tabbar-item>
      <van-tabbar-item
        badge="3"
        icon="shopping-cart-o"
      >购物车</van-tabbar-item>
      <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  props: {
    active: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      activenumber: this.active
    }
  },
  methods: {
    onChange(index) {
      console.log(index)
      switch (index) {
        case 0:
          this.$nextTick(() => {
            this.$router.push({
              path: '/'
            })
          })
          break
        case 1:
          this.$nextTick(() => {
            this.$router.push({
              path: '/classify'
            })
          })
          break
        case 2:
          this.$nextTick(() => {
            this.$router.push({
              path: '/shoppingCart'
            })
          })
          break
        case 3:
          this.$nextTick(() => {
            this.$router.push({
              path: '/user'
            })
          })
          break
      }
      //   Notify({ type: 'primary', message: index });
    },
  },
}
</script>

<style>
</style>